<template>
  <div class="task-management-container">
    <!-- 左侧区域 -->
    <div class="left-panel">
      <TaskList
        @task-select="handleTaskSelect"
        @task-edit="handleTaskEdit"
        @task-create="handleTaskCreate"
      />
      <TaskDetail
        :task="selectedTask"
        @task-edit="handleTaskEdit"
        @task-delete="handleTaskDelete"
      />
    </div>
    <!-- 右侧区域 -->
    <div class="right-panel">
      <TaskStats />
      <TaskCategory />
    </div>
  </div>
</template>

<script>
import TaskList from '@/components/task/TaskList.vue';
import TaskDetail from '@/components/task/TaskDetail.vue';
import TaskStats from '@/components/task/TaskStats.vue';
import TaskCategory from '@/components/task/TaskCategory.vue';

export default {
  name: 'Task',
  components: {
    TaskList,
    TaskDetail,
    TaskStats,
    TaskCategory
  },
  data() {
    return {
      selectedTask: null
    }
  },
  methods: {
    handleTaskSelect(task) {
      this.selectedTask = task;
    },
    handleTaskEdit(task) {
      this.$message.info(`编辑任务：${task.name}`);
      // 可弹窗或跳转编辑页面逻辑
    },
    handleTaskDelete(taskId) {
      this.$message.warning(`删除任务 ID：${taskId}`);
      // 实际调用接口删除并更新列表
    },
    handleTaskCreate() {
      this.$message.info('新建任务');
      // 可弹窗或跳转创建页面逻辑
    }
  }
}
</script>

<style scoped>
.task-management-container {
  display: flex;
  padding: 20px;
  gap: 20px;
}
.left-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
